<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础饼图</title>
    <script src="../../echarts.min.js"></script>
</head>
<body>
    <div id="main" style="height: 600px;width: 600px;"></div>
</body>
<script>
    let mychart = echarts.init(document.getElementById("main"))
    let option = {
        title:{
            text:"各商品销售占比",
            subtext:"A商场情况分析",
            left:"center"
        },
        tooltip:{
            trigger:"item",
            formatter:"{a}<br/>{b}:{c}({d}%)"
        },
        legend:{
            orient:"vertical",
            left:'left',
            data:["A商品","B商品","C商品","D商品","E商品"]
        },
        series:[
            {
                name:"所售商品",
                type:"pie",
                data:[
                    {value:343,name:"A商品"},
                    {value:250,name:"B商品"},
                    {value:509,name:"C商品"},
                    {value:108,name:'D商品'},
                    {value:948,name:'E商品'}
                ]
            }
        ]
    }
    mychart.setOption(option)
</script>
</html>